<template>
  <div class="equip-containner">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="5">
        <span><img :src="returnnormalpress1" class="returnnormalpress"/></span>
        <span><img :src="realtimeindexs" class="equiplist"/></span>
        <span class="description">协议库管理</span>
      </el-col>
    </el-row>
    <div class="equipManagement">
      <!--<div class="equipTop">-->
        <!--<p class="equipTitle">协议库管理</p>-->
      <!--</div>-->
      <div class="equip-content">
        <el-row :gutter="20" style="width: 100%;">
          <el-col :span="4">
            <div class="contentLeft">
              <div class="searchInput">
                <el-input size="mini" suffix-icon="el-icon-search">
                </el-input>
              </div>
              <left-tree
                v-model="ztreeDataSource"
                :props="defaultProps"
                ref="tree"
                @NodeClick="handleNodeClick">
              </left-tree>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="contentRight">
              <protocol-tbale></protocol-tbale>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <tree-item style="display: none" v-on:reload="getreload()"></tree-item>
  </div>
</template>
<script>
  import LeftTree from './components/treeindex.vue'
  import TreeItem from './components/treeItem.vue'
  import protocolTbale from './components/protocolTable.vue'
  import axios from 'axios'
  import realtimeindexs from '@/assets/home/management.png'
  import returnnormalpress1 from '@/assets/home/returninvalid.png'
  import bus from './components/bus'
  export default {
    components: { LeftTree, protocolTbale, TreeItem },
    data() {
      return {
        /**
         *  左侧树 start
         * */
        ztreeDataSource: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
        dataList: [],
        treeDeepCopy: [],
        parentNodeModel: [], // 当前点击节点父亲对象
        nodeModel: null, // 当前点击节点对象
        ztreeDataSourceList: [],
        ztreeDataSourceSync: [],
        /**
         *  左侧树 end
         * */
        // 传id值
        giveResource: '',
        // 以下为接口
        submitdata: {
          access_token: localStorage.getItem('access_token'),
          type: 'projects_type_getall',
          id: '1'
        },
        realtimeindexs,
        returnnormalpress1
      }
    },
    methods: {
      // get Reload
      getreload(data) {
        console.log(data)
      },
      // 资源树总览
      queryData() {
        axios.post('/protocol', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.ztreeDataSource.push(res.data.data)
          console.log(this.ztreeDataSource)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      handleNodeClick(data) {
        console.log(data)
        this.giveResource = data.resource_id
        console.log(this.giveResource)
        this.resourceId()
      },
      // 传输resourceID
      resourceId() {
        bus.$emit('giveResource', this.giveResource)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .equip-containner{
    font-size: 16px;
    color: #25B6C7;
    .seachnav{
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top:0;
      bottom: 0;
      line-height: 55px;
      padding-left: 20px;
      .description{
        font-size: 18px;
        color: #333;
        line-height: 10px;
        padding-left: 10px;
      }
      .returnnormalpress{
        vertical-align: middle;
      }
      .equiplist{
        vertical-align: middle;
        margin-left: 10px;
      }
      .searchinvalid{
        vertical-align: middle;
      }
      .con{
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;
        .seachContent{
          font-size:18px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          padding-top: 0px;
          color:rgba(51,51,51,1);
        }
        .seachtitle{
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(102,102,102,1);
        }
      }
    }
    .equipManagement{
      background-color: #fff;
      margin: 20px 20px;
      .equipTop{
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ccc;
        .equipTitle{
          font-size: 16px;
          color: #676A70;
          padding-left: 5px;
          border-left: 5px solid #25B6C7;
          height: 16px;
        }
      }
      .equip-content{
        width: 100%;
        margin-top: 20px;
        .contentLeft{
          width: 280px;
          height: 810px;
          background-color: #EAEDF1;
          /*float: left;*/
          .searchInput{
            width: 240px;
            margin: 0 0 0 20px;
            padding-top: 10px;
            padding-bottom: 10px;
          }
        }
      }
    }
  }
  .contentRight {
    width: 101.4%;
  }
  /deep/ .el-tree-node{
    background-color: #EAEDF1;
  }
</style>
